<template>
  <el-dialog
    title="编辑资料"
    :visible="$store.state.userEditPanelShow"
    width="30%"
    @close="closeDialog"
  >
    <el-tabs v-model="currentTab">
      <el-tab-pane label="收货地址" name="delivery">
        <div class="new-delivery">
          <el-form
            :model="deliveryForm"
            :rules="deliveryFormRules"
            ref="deliveryForm"
            label-width="80px"
          >
            <el-form-item label="地址" prop="building">
              <el-input
                v-model="deliveryForm.building"
                placeholder="在地图上点击以选择地点"
                readonly
                >1111</el-input
              >
              <el-amap
                class="amap-box"
                :vid="'amap-vue'"
                :zoom="10"
                :events="mapEvents"
                :plugin="plugin"
              >
              </el-amap>
            </el-form-item>
            <el-form-item label="详细地址" prop="detail">
              <el-input
                v-model="deliveryForm.detail"
                placeholder="详细地址"
              ></el-input>
            </el-form-item>

            <el-button
              type="success"
              size="small"
              style="float: right"
              @click="handleSaveDelivery"
              >保存</el-button
            >
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="登录密码" name="password">
        <el-form
          label-width="100px"
          :model="resetPasswordForm"
          ref="resetPasswordForm"
          :rules="resetPasswordFormRules"
        >
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input
              v-model="resetPasswordForm.oldPassword"
              placeholder="旧密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input
              v-model="resetPasswordForm.newPassword"
              placeholder="新密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="重复新密码" prop="repeatPassword">
            <el-input
              v-model="resetPasswordForm.repeatPassword"
              placeholder="重复新密码"
              show-password
              clearable
            ></el-input>
          </el-form-item>
          <el-button
            type="success"
            size="small"
            style="float: right"
            @click="handleUpdatePassword"
            >确认修改</el-button
          >
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="个人信息" name="info">
        <el-form label-width="70px">
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="userInfo.nickname" placeholder="昵称"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input
              v-model="userInfo.phone"
              placeholder="手机号码"
              disabled
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="success"
          size="small"
          style="float: right; margin-top: 20px"
          @click="updateUserInfo"
          >确认修改</el-button
        >
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import deliveryService from "../../service/DeliveryService";
import consumerService from "../../service/ConsumerService";
export default {
  props: ["currentTab"],
  data() {
    return {
      address: "",
      activeName: "delivery",
      deliveryForm: {
        building: "",
        detail: "",
      },
      userInfo: this.$store.state.user.info,
      deliveryFormRules: {
        building: [{ required: true, message: "请选择地点", trigger: "blur" }],
        detail: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
      resetPasswordForm: {
        oldPassword: "",
        newPassword: "",
        repeatPassword: "",
      },
      resetPasswordFormRules: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        repeatPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
        ],
      },
      deliveryList: [],
      mapEvents: {
        click(e) {
          const { lng, lat } = e.lnglat;
          this.lng = lng;
          this.lat = lat;

          // 这里通过高德 SDK 完成。
          const geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          geocoder.getAddress([lng, lat], (status, result) => {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                deliveryService.editPanel.deliveryForm.building =
                  result.regeocode.formattedAddress;
              }
            }
          });
        },
      },
      plugin: [
        {
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.center = [self.lng, self.lat];
                  self.loaded = true;
                  self.$nextTick();
                }
              });
            },
          },
        },
      ],
    };
  },
  methods: {
    closeDialog() {
      this.$refs["deliveryForm"].resetFields();
      this.$refs["resetPasswordForm"].resetFields();

      this.$store.state.userEditPanelShow = false;
    },

    async getDeliveryList() {
      try {
        this.deliveryList = await deliveryService.getDeliveryList();
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async addDelivery() {
      try {
        await deliveryService.addDelivery(this.deliveryForm);
        
       // console.log(this.address)
        this.$message.success("修改收货信息成功");
        window.location.reload()
        //this.$router.push({path:'/my'})
      } catch (e) {
        console.log("error ")
        this.$message.error(e.message);
      }
    },
    handleSaveDelivery() {
      this.$refs.deliveryForm.validate((v) => {
        if (v) {
          this.addDelivery();
          this.closeDialog();
        } else {
          this.$message.error("请将信息填写完整");
        }
      });
    },

    async updateUserInfo() {
      try {
        if (await consumerService.updateUserInfo(this.userInfo)) {
          this.$message.success("更新资料成功");
          this.closeDialog();
        }
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async handleUpdatePassword() {
      if (
        this.resetPasswordForm.oldPassword &&
        this.resetPasswordForm.newPassword &&
        this.resetPasswordForm.repeatPassword
      ) {
        if (
          this.resetPasswordForm.newPassword !==
          this.resetPasswordForm.repeatPassword
        ) {
          return this.$message.error("两次输入的新密码不一致");
        }
        try {
          if (
            await consumerService.updatePassword(
              this.resetPasswordForm.oldPassword,
              this.resetPasswordForm.newPassword
            )
          ) {
            this.$message.success("修改密码成功");
            this.closeDialog();
          }
        } catch (e) {
          this.$message.error(e.message);
        }
      } else {
        this.$message.error("请将密码信息填写完整");
      }
    },
  },
  created() {
    deliveryService.editPanel = this;
    //this.getDeliveryList()
  },
};
</script>

<style lang="less" scoped>
.amap-box {
  width: 100%;
  height: 200px;
}
.delivery-list {
  .el-icon-edit {
    font-size: 20px;
    height: 28px;
    line-height: 28px;
  }
  h4 {
    margin: 0;
  }
}
</style>
